<template>
	<view>
		<view class="add-clue main-basic-box">
			<view class="add-title">对话截图</view>
			<c-upload :imgs="imgList" :maxNum="5" @delImg="delImg" @addSuccess="addImg"></c-upload>
			<van-field label="姓名" :value="name" @change="name = $event.detail" placeholder="请输入" input-align="right"
				clearable>
			</van-field>
			<van-field label="电话" :value="mobile" type="number" :maxlength="11" @change="mobile = $event.detail"
				placeholder="请输入" input-align="right" clearable>
			</van-field>
			<picker mode="selector" :range="clueArr" range-key="name" @change="clueChange">
				<van-field label="平台名称" readonly input-align="right">
					<template slot="button">
						<view style="color: #8A8F99"> {{resource ? resource : '请选择'}} <van-icon name="arrow"
								color="#BEBFC2"></van-icon> </view>
					</template>
				</van-field>
			</picker>

			<van-field label="平台账号" :value="social" @change="social = $event.detail" placeholder="请输入"
				input-align="right" clearable>
			</van-field>
			<!-- 	<van-field :value="social" @change="social = $event.detail" placeholder="请输入" input-align="right" clearable>
				<template slot="label">
					<view class="fx-center label-title">
						<view class="">社交ID</view>
						<image src="/static/wenhao1.png" mode="heightFix"></image>
					</view>
				</template>
			</van-field> -->
			<van-field label="备注" :value="memo" @change="memo = $event.detail" placeholder="请输入" input-align="right"
				clearable>
			</van-field>
		</view>
		<view class="main-basic-btn">
			<van-button block color="#4078E5" @click="submit">提交</van-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [], //对话截图
				name: '', //姓名
				mobile: '', //电话
				resource: '', //客资来源
				social: '', //社交ID
				memo: '', //备注
				clueArr: [],
				project_id: null,
			};
		},
		onLoad(e) {
			if (e.pid) {
				this.project_id = e.pid
			}
			this.getclueSourse()
		},
		methods: {
			getclueSourse() {
				this.$api
					.requst('/gwc/orders/clue_sources', {}, )
					.then((res) => {
						this.clueArr = res.data
					})
			},
			delImg(index) {
				this.imgList.splice(index, 1)
			},
			addImg(url) {
				this.imgList.push(url)
			},
			clueChange(e) {
				this.resource = this.clueArr[e.detail.value].name
			},
			async submit() {
				if (this.imgList.length <= 0) {
					this.$api.showError('请上传对话截图！')
					return
				}
				if (this.resource === '') {
					this.$api.showError('请选择平台名称！')
					return
				}
				if (this.social.trim() === '') {
					this.$api.showError('请输入平台账号！')
					return
				}
				uni.showLoading({
					title: '数据提交中...'
				})
				let ids = []
				// 评价文件
				for (let i = 0; i < this.imgList.length; i++) {
					let fid = await this.$api.requestUploadQNY(this.imgList[i])
					ids.push(fid.asset_id)
				}
				let list = {
					project_id: this.project_id,
					order_type: 1,
					memo: this.memo,
					payload: {
						file: ids.join(','),
						name: this.name,
						phone: this.mobile,
						pl_source: this.resource,
						pl_account: this.social,
					},
				}
				this.$api
					.requst('/gwc/orders/create', list, 'POST')
					.then((res) => {
						this.$api.showError('提交成功！')
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)

					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.add-clue {
		margin-top: 32rpx;

		.add-title {
			font-size: 30rpx;
			color: #161616;
			padding-top: 4rpx;
			padding-bottom: 8rpx;
		}

		.label-title {
			font-size: 30rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 8rpx;
			}
		}
	}

	::v-deep .van-cell {
		padding: 32rpx 0 !important;
	}

	::v-deep .van-field__label {
		font-size: 30rpx !important;
		color: #161616 !important;
	}

	::v-deep .van-cell:after {
		left: 0 !important;
		right: 0 !important;
	}
</style>